<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less" scoped>
    @import "./page.less";
</style>

<template>
    <div class="card-panel">
        <el-steps :active="status" finish-status="success">
            <el-step title="新增企业信息"></el-step>
            <el-step title="完善发票信息"></el-step>
            <el-step title="完善收货信息"></el-step>
            <el-step title="新增供应商信息"></el-step>
            </el-steps>
        <el-row class="mt-30">
            <el-col :span="12" v-if="status == 0">
                <el-form :model="form" label-width="130px">
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="企业名称" class="item">
                                <el-input v-model="form.name" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="营业执照" class="item">
                                <el-input v-model="form.code" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="登录账号" class="item">
                                <el-input v-model="form.username"  class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="账号密码" class="item">
                                <el-input v-model="form.password"  class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="服务费率" class="item last-item">
                                <el-input v-model="form.service_rate" class="select-input" style="width: 362px;"></el-input>&nbsp;%
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="销售人员" class="item last-item">
                                <el-input v-model="form.sale_name" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-button type="primary" @click="submit" class="btn-block submit-btn ">保存</el-button>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="12" v-if="status == 1">
                <el-form :model="formS" label-width="130px">
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="开票抬头" class="item">
                                <el-input v-model="formS.name"  class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="开票税号" class="item last-item">
                                <el-input v-model="formS.tax" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="联系地址" class="item last-item">
                                <el-input v-model="formS.address" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="联系电话" class="item last-item">
                                <el-input v-model="formS.tel" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="银行名称" class="item last-item">
                                <el-input v-model="formS.bank_name" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="银行账号" class="item last-item">
                                <el-input v-model="formS.bank_code" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <p class="tips">提示：这是一段提示，随便添一添无所谓的，这是一段提示</p>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-button type="primary" @click="submitS" class="btn-block submit-btn green-btn">保存</el-button>
                        <el-button type="primary" @click="pre" class="btn-block submit-btn ">上一步</el-button>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="12" v-if="status == 2">
                <el-form :model="formR" label-width="130px">
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="收件人姓名" class="item last-item">
                                <el-input v-model="formR.express_name" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="收件人电话" class="item last-item">
                                <el-input v-model="formR.express_tel" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="收件人地址" class="item last-item">
                                <el-input v-model="formR.express_address" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-button type="primary" @click="confirmR" class="btn-block submit-btn green-btn">保存</el-button>
                        <el-button type="primary" @click="pre" class="btn-block submit-btn ">上一步</el-button>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="12" v-if="status == 3">
                <div class="table-wrapper">
                    <el-table :data="list" :header-cell-style="getRowClass" @selection-change="handleSelectionChange" stripe>
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column prop="enterPriseName" label="供应商名称" style="text-align: left;">
                            <template slot-scope="scope">
                                <div>
                                    <span style="color: #40A292;">{{scope.row.name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="availBalance" label="分配比例" width="100px">
                            <template slot-scope="scope">
                                <div>
                                    <el-input v-model="percents[scope.row.id]" @change="handlePercents(scope.row.id)">
                                    	<template slot="append">%</template>
                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="availBalance" label="个税税率" width="100px">
                            <template slot-scope="scope">
                                <div>
                                    <el-input v-model="rates[scope.row.id]" @change="handleTax(scope.row.id)" placeholder="6">
                                    	<template slot="append">%</template>
                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-show="total>0" class="mt20 pagination" layout="sizes,total, prev, pager, next, jumper" :total="total" :page-size="param.size" :current-page="param.page" :page-sizes="pageNum" @current-change="pageSearch" @size-change="handleSizeChange" background></el-pagination>
                </div>
                
                <el-row type="flex" align="bottom">
                    <el-button type="primary" @click="confirmD" class="btn-block submit-btn green-btn">完成</el-button>
                </el-row>
            </el-col>
            <el-col :span="12">
                <Contract></Contract>
            </el-col>
        </el-row>

        <div class="dialog-wrapper">
            <el-dialog
                title="新增企业信息成功"
                :visible.sync="isShowDialog"
                width="400px"
                center>
                <div class="dialog-content">
                    <el-button type="primary" @click="toEnterPriseList" class="btn-block redirect-btn">查看企业列表</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
